<script setup>
import {
  getBizSongsInfo,
  addBizSongsInfo,
  updateBizSongsInfo,
  findMaxSort
} from "@/api/biz/bizSongsInfo";
import storage from "@/utils/storage";
import { TOKEN } from "@/store/mutation-types";
const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  }
});
const fileHeahers = ref({
  url: import.meta.env.VITE_APP_API_BASEURL + "/common/upload",
  headers: {
    Authorization: "Bearer " + storage.local.get(TOKEN)
  }
});
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const formRef = ref();
const data = ref({
  loading: false,
  form: {
    id: props.id,
    bannerImage: [],
    status: "0"
  },
  rules: {
    name: [
      { required: true, message: "请输入登陆账号", trigger: "blur" },
      { validator: getcheckUserNameUnique }
    ]
  },
  fileList: [],
  activeName: "first"
});

onMounted(() => {
  if (data.value.form.id != "") {
    getInfo();
  } else {
    findMaxSort().then((res) => {
      data.value.form.sort = res.data;
    });
  }
});

function handleRemove(uploadFile, uploadFiles) {
  console.log(uploadFile, uploadFiles);
  if (uploadFiles.length > 0) {
    data.value.form.indexImg = uploadFiles.map((item) => {
      return item.url;
    });
  } else {
    data.value.form.indexImg = [];
  }

  console.log("item.url", data.value.form.indexImg);
}

function getInfo() {
  data.value.loading = true;
  getBizSongsInfo(props.id).then((res) => {
    data.value.loading = false;
    data.value.form = res.data;
    if (res.data.bannerImage) {
      data.value.form.bannerImage = JSON.parse(res.data.bannerImage);
      // data.value.fileList = data.value.form.indexImg;
      data.value.fileList = data.value.form.bannerImage.map((item) => {
        return { name: item, url: item, uid: "001" };
      });
    } else {
      data.value.form.bannerImage = [];
    }
  });
}
function handlePictureCardPreview(uploadFile) {
  dialogImageUrl.value = uploadFile.url;
  console.log(uploadFile.url);
  dialogVisible.value = true;
}

function handleIndexImg(response, file, fileList) {
  data.value.form.bannerImage.push(file.response.data.url);
}

function getcheckUserNameUnique(rule, value, callback) {
  if (data.value.form.id !== "" || data.value.form.id !== undefined) {
    callback();
  }
  const msg = "登陆账号已存在";
  if (value === "") {
    callback();
  } else {
    const checkData = {
      userName: value
    };
    checkUserNameUnique(checkData).then((response) => {
      if (response.data.code === "1") {
        callback();
      } else {
        callback(msg);
      }
    });
  }
}
defineExpose({
  submit(callback) {
    if (data.value.form.id == "") {
      formRef.value.validate((valid) => {
        if (valid) {
          data.value.form.bannerImage = JSON.stringify(
            data.value.form.bannerImage
          );
          addBizSongsInfo(data.value.form).then(() => {
            ElMessage.success({
              message: "保存成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    } else {
      formRef.value.validate((valid) => {
        if (valid) {
          data.value.form.bannerImage = JSON.stringify(
            data.value.form.bannerImage
          );
          updateBizSongsInfo(data.value.form).then(() => {
            ElMessage.success({
              message: "修改成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    }
  }
});
</script>

<template>
  <div v-loading="data.loading">
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="data.rules"
      label-width="120px"
      label-suffix=" "
      label-position="top"
      style="padding: 0 20px"
    >
      <el-row :gutter="30">
        <el-col :span="24" v-if="data.form.id">
          <el-form-item label="编号ID" prop="title">
            <el-input placeholder="编号ID" v-model="data.form.id" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="演出主题" prop="title">
            <el-input placeholder="请输入演出主题" v-model="data.form.title" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="演出地址" prop="address">
            <el-input
              placeholder="请输入演出地址"
              v-model="data.form.address"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="演出时间" prop="songTime">
            <el-date-picker
              v-model="data.form.songTime"
              clearable
              type="datetime"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" prop="price">
            <el-input-number placeholder="价格" v-model="data.form.price" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发行总票数" prop="totel">
            <el-input-number
              placeholder="发行总票数"
              v-model="data.form.totel"
              style="width: 50%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="data.form.status">
              <el-radio-button label="0" checked="checked"
                >停用</el-radio-button
              >
              <el-radio-button label="1">启用</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-tabs
            v-model="data.activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane name="first" label="演出轮播主图">
              <el-upload
                v-model:file-list="data.fileList"
                :action="fileHeahers.url"
                :headers="fileHeahers.headers"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleIndexImg"
              >
                <svg-icon
                  style="color: #409eff; font-size: 32px"
                  name="ep:plus"
                >
                </svg-icon>
              </el-upload>
              <span style="color: #999"
                >最多上传6张宣传轮播图，建议图片像素（720px*850px）</span
              >
              <el-dialog v-model="dialogVisible" width="750px">
                <img w-full :src="dialogImageUrl" alt="宣传轮播图" />
              </el-dialog>
            </el-tab-pane>
            <el-tab-pane name="second" label="演出详情">
              <el-form-item
                label="演出详情（文字描述、宣传海报、注意事项）"
                prop="detailsInfo"
              >
                <editor v-model="data.form.detailsInfo" />
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
